body{
    display: flex;
    flex-direction: column;
    .scr{
        overflow-y: scroll;
    }
    main{
        // flex: 1 0 auto;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        
        // header{
        //     width: 100%;
        //     height: 200PX;
        //     background: #f60;
        //     margin-bottom: 20px;
        //      overflow: hidden;
            .swiper {
                width: 100%;
                height: 200PX;
                overflow: hidden;
                position: relative;
                margin-bottom: 20px;
                img{
                    width: 100%;
                    height: 200PX;
                    font-size: 0;
                }
            } 
        // }
        .oneBox{
            width: 90%;
            height:  150px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            .ranking{
                width: 40%;
                height: 150px;
                background: #007cc4;
                border-radius: 15px;
                overflow: hidden;
                position: relative;
                span{
                    display: block;
                    font-size: 18px; 
                    color: #012f49;
                    position: absolute;
                    top: 20px;
                    left: 10px;
                    z-index: 1;
                }
                .iconfont{
                    background: #007cc4;
                    font-size: 120px;
                    color: rgba(255, 255, 255,.5);
                    position: absolute;
                    left: -20px;
                    bottom: -10px;
                }
                .num{
                    font-size: 60px;
                    color:#fff;
                    position: absolute;
                    right: 10px;
                    bottom: 0;
                }
            }
            .Card{
                width: 55%;
                height: 150px;
                background: rgb(53, 155, 250);
                border-radius: 15px;
                overflow: hidden;
                position: relative;
                .tex{
                    font-size: 18px; 
                    color: #012f49;
                    position: absolute;
                    top: 20px;
                    left: 10px;
                    z-index: 1;
                }
                .iconfont{
                    background: rgb(53, 155, 250);
                    font-size: 100px;
                    color: rgba(255, 255, 255,.5);
                    position: absolute;
                    left: 0px;
                    bottom: 0px;
                }
                .num{
                    font-size: 20px;
                    color: #012f49;
                    border: 2px solid #012f49;
                    border-radius: 15px;
                    position: absolute;
                    right: 20px;
                    bottom: 30px;
                }
            }
        }
        .twoBox{
            width: 90%;
            height:120px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            .datas{
                width: 47.5%;
                height: 120px;
                background: url('../../assets/imgs/index-card-data.png');
                background-size: 100%;
                border-radius: 15px;
                overflow: hidden;
                position: relative;
                span{
                    display: block;
                    font-size: 18px; 
                    color: #fff;
                    position: absolute;
                    top: 20px;
                    left: 10px;
                } 
            }
            .emblem{
                width: 47.5%;
                height: 120px;
                background: #8dadf3;
                border-radius: 15px;
                overflow: hidden;
                position: relative;
                span{
                    display: block;
                    font-size: 18px; 
                    color: #012f49;
                    position: absolute;
                    top: 20px;
                    left: 10px;
                    z-index: 1;
                }
                .iconfont{
                    background: #8dadf3;
                    font-size: 100px;
                    color: rgba(255, 255, 255,.5);
                    position: absolute;
                    left: 0px;
                    bottom: 0px;
                }
                .num{
                    color: #012f49;
                    font-size: 70px;
                    border-radius: 15px;
                    position: absolute;
                    right: 30px;
                    bottom: 10px;
                } 
                .monad{
                    color: #012f49;
                    font-size: 18px;
                    position: absolute;
                    right: 10px;
                    bottom: 20px;
                }
            }
        }
        .course{
            width: 90%;
            height: 120px;
            margin-bottom: 20px;
            background:url('../../assets/imgs/course-img04.jpg');
            background-size: 100%;
            border-radius: 15px;
            overflow: hidden;
            position: relative;
            span{
                display: block;
                font-size: 18px; 
                color: #fff;
                position: absolute;
                top: 20px;
                left: 10px;
            } 
        }
        .outdoors{
            width: 90%;
            height: 120px;
            margin-bottom: 20px;
            background:url('../../assets/imgs/index-card-run.png');
            background-size: 100%;
            border-radius: 15px;
            overflow: hidden;
            position: relative;
            span{
                display: block;
                font-size: 18px; 
                color: #fff;
                position: absolute;
                top: 20px;
                left: 10px;
            } 
        }
        

    }
}